<template>
  <!-- 设置等级指定折扣 -->
  <div style="margin-bottom: 10px">
    <a-table
      size="small"
      :loading="tableLoading"
      :dataSource="tableData"
      :columns="columns"
      bordered
      :pagination="false"
    >
      <template #bodyCell="{record, column, index}">
        <template v-if="column.title == '折扣(%)'">
          <a-input-number
            :min="0"
            :max="100"
            :controls="false"
            style="width: 100%"
            v-model:value="tableData[index].productTypeDiscount"
          ></a-input-number>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
import {ref, computed} from "vue";
const tableLoading = ref<boolean>(false);
const props = defineProps({
  list: {
    type: Array,
    default: []
  }
});
const emits = defineEmits(["update:list"]);

const tableData = computed({
  get() {
    return props.list;
  },
  set(value) {
    emits("update:list", value);
  }
});
const columns = ref<Array<any>>([
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    width: 50,
    customRender: ({index}) => {
      return index + 1;
    },
    fixed: "left"
  },
  {
    title: "分类名称",
    dataIndex: "productTypeName",
    align: "center",
    width: 200
  },
  {
    title: "折扣(%)",
    dataIndex: "productTypeDiscount",
    align: "center",
    width: 140
  }
]);
</script>
<style lang="less" scoped></style>
